<template>
  <div class="super-search-page">
    <a-form autocomplete="off" labelAlign="right">
      <a-row :gutter="16">
        <a-col v-for="item in searchList" :key="item.keyName" :span="spanCount">
          <a-form-item :label="item.label" :colon="false" class="fontSize" :labelCol="{ span: 5 }" :wrapperCol="{ span: 24 }">
            <search-item :pass-data="item" :search-form="puppeteerSearchForm" @search="searchHandle"></search-item>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-row style="margin-top: 8px">
      <a-col :span="24">
        <a-button class="submit-btn" type="primary" @click="searchHandle">搜索</a-button>
        <a-button class="cancel-btn" @click="resetHandle">重置</a-button>
        <a-button style="margin-left: 12px" v-if="searchItemConfig.length >= 20 && hasUnfold" @click="showMoreHandle">{{ showMore ? "展开" : "收起" }}</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
export default {
  name: "SuperSearch"
};
</script>
<script lang="ts" setup>
import { computed, ref, toRefs } from "vue";
import { SearchForm } from "./index";
import OperationHook from "./composables/operationHook";
import SearchItem from "./searchItem.vue";
const props = withDefaults(
  defineProps<{
    searchForm: any;
    searchItemConfig: Array<SuperSearch.SearchItem>;
    spanCount?: number; //栅格数
    hasUnfold?: boolean; // 是否展示   收起/展开 按钮
    showMore?: boolean; //收起/展开
  }>(),
  {
    spanCount: 6,
    showMore: false,
    hasUnfold: true
  }
);
const emit = defineEmits<{
  (e: "search"): void;
  (e: "update:showMore", bol: boolean): void;
}>();
const { searchForm, searchItemConfig, spanCount, showMore, hasUnfold } = toRefs(props);
//展开/收起
const searchList = computed<Array<SuperSearch.SearchItem>>(() => {
  if (showMore.value) return searchItemConfig.value.slice(0, spanCount.value === 6 ? 4 : 6);
  else return searchItemConfig.value;
});
//展开收起控制 回传
const showMoreHandle = () => {
  emit("update:showMore", !showMore.value);
};

const puppeteerSearchForm = ref<SearchForm>(searchForm.value);
const { searchHandle, resetHandle } = OperationHook({ emit, puppeteerSearchForm });
</script>
<style lang="stylus" scoped>
.submit-btn{
    margin-right: 16px;
}
.fontSize{
  margin-bottom:5px;
}
:deep(.ant-form-item-label > label){
  font-size:12px;
}
</style>
